<!--
 * @Description: 总部看板-成本计划
 * @Author: wind-lc
 * @version: 1.0
 * @Date: 2024-03-01 11:08:02
 * @LastEditTime: 2024-03-01 15:42:04
 * @FilePath: \cscec-pms-admin\src\views\businessAffairs\businessCostPlanManagement\headquartersDashboard\index.vue
-->
<template>
  <base-breadcrumb  id="content">
    <a-spin :spinning="spinning">
      <fullScreen />
      <!-- 当期数据统计表 -->
      <a-card :bordered="false">
        <!-- 统计 -->
        <board isPresent="1" :totalArr="totalArr"></board>

        <!-- 表格 -->
        <!-- <Table :columns="columns" :tableData="tableData"></Table> -->
        <a-row>
          <div class="unit">(单位：万元)</div>
        </a-row>
        <a-row class="totalBox totalBox1">
          <!--:ArrTableData="tableData" -->
          <list-table :columns="columns" :ArrTableData="tableData" :isShowColumnFilter="false" :showPage="false" :customRow="cellEdit"></list-table>
        </a-row>
        <!-- 柱状图 -->
        <EBar ref="accomplishRatio" :eBarData="accomplishRatioOption" :ready="ready" id="eBar1" :isSort="false" />
        <!-- <div class="add">目标与实际成本差值</div>
        <div class="smb">实目比</div> -->
      </a-card>

      <!-- 已完成节点数据统计表 -->
      <a-card :bordered="false">
        <!-- 统计 -->
        <board :totalArr="project"></board>

        <!-- 表格 -->
        <!-- <Table :columns="columns" :tableData="projectData"></Table> -->
        <a-row>
          <div class="unit">(单位：万元)</div>
        </a-row>

        <a-row class="totalBox totalBox1">
          <!--  :ArrTableData="projectData" -->
          <list-table :columns="columns" :ArrTableData="projectData" :isShowColumnFilter="false" :showPage="false"> </list-table>
        </a-row>
        <!-- 柱状图 -->
        <EBar ref="accomplishRatio" :eBarData="accomplishRatioOption1" :ready="ready1" id="eBar2" :isDataZoom="true" />
        <!-- <div class="add">目标与实际成本差值</div>
        <div class="smb">实目比</div> -->
        <!-- 差值和实目比 -->
      </a-card>

      <a-card :bordered="false">
        <title-name title="总成本折线对比图" />
        <div class="project1" v-if="isPresent">
          <div :class="[isBackColor?'projectColor':'','allProject']" @click="getCostContrastList(2)">全部项目</div>
          <div :class="[!isBackColor?'projectColor':'','allProject']" @click="getCostContrastList(1)">在建项目</div>
        </div>
        <!-- 表格 -->
        <!-- <Table :columns="columns1" :tableData="dataSource"></Table> -->
        <a-row>
          <div class="unit">(单位：万元)</div>
        </a-row>
        <a-row class="totalBox">
          <!-- :ArrTableData="dataSource"-->
          <list-table :columns="columns1" :ArrTableData="dataSource" :isShowColumnFilter="false" :showPage="false" :scroll="{x: true}"></list-table>
        </a-row>
        <ELine :eLineData="ELineData" :lineShow="lineShow"></ELine>
      </a-card>
    </a-spin>
  </base-breadcrumb>
</template>
<script>
import board from '../components/board/index.vue'
import EBar from '../components/EBar/EBar.vue'
// import Table from '../components/Table/Table.vue';
import ELine from '../components/ELine/ELine.vue'
import fullScreen from '../components/fullScreen/fullScreen.vue'
import { placeholder } from '../components/placeholderWay.js'
import { getCompleteNodeStatistics, getCurrentPeriodStatistics, getCostContrast } from '@/api/businessAffairs/businessCostPlanManagement.js'
export default {
  name: 'spectaculars',
  inject: ["reload"],
  components: {
    board,
    EBar,
    // Table,
    ELine,
    fullScreen
  },
  data() {
    return {
      isBackColor:true,
      spinning: false,
      isPresent:true,
      // 当期数据统计表 - 表头
      columns: [
        {
          title: '序号',
          width: 60,
          align: 'center',
          customRender: (text, record, index) => {
            return index + 1
          }
        },
        {
          title: '分公司名称',
          width: 180,
          dataIndex: 'name'
        },

        {
          title: ' 标准成本',
          dataIndex: 'standardCost',
          align: 'center',
          width: 110
        },
        {
          title: ' 目标成本',
          dataIndex: 'targetCost',
          align: 'center',
          width: 150
        },
        {
          title: ' 当期累计目标成本',
          dataIndex: 'currentTargetCost',
          align: 'center'
        },
        {
          title: ' 当期累计实际成本',
          dataIndex: 'realityCost',
          align: 'center',
          width: 150
        },
        {
          title: ' 目标与实际成本差值',
          dataIndex: 'difference',
          align: 'center',
          width: 160
        },
        {
          title: ' 实目比',
          dataIndex: 'solidEyeRatio',
          align: 'center',
          customRender: (text, record, index) => {
            return text ? (text * 1).toFixed(4) : 0.0
          }
        }
      ],

      // 当期数据统计表 - 表格数据
      tableData: [],

      // 当期数据统计表 - 统计
      totalArr: [
        {
          name: '目标成本合计',
          money: ''
        },
        {
          name: '实际成本合计',
          money: ''
        },
        {
          name: '目标与实际成本差值',
          money: ''
        },
        {
          name: '实目比',
          money: ''
        }
      ],

      // 已完成节点 - 统计
      project: [
        {
          name: '目标成本合计',
          money: ''
        },
        {
          name: '实际成本合计',
          money: ''
        },
        {
          name: '目标与实际成本差值',
          money: ''
        },
        {
          name: '实目比',
          money: ''
        }
      ],
      // 已完成节点 - 表格数据
      projectData: [],
      // 当期数据统计表 - 柱状图
      // accomplishRatioOption: {
      //   legend: {
      //     // left: '15%',
      //     // top:'2%',
      //     data: ['标准成本', '当前累计目标成本', '当前累计实际成本']
      //   },
      //   color: ['#4874cb', '#ee823a', '#f2bb43'],
      //   // y轴滚动条配置
      //   // dataZoom:{
      //   //   show:true,
      //   //   realtime:true,
      //   //   type:'slider',
      //   //   // y:70,
      //   //   width:"80%",
      //   //   height:10,
      //   //   start:0,
      //   //   end:80,
      //   //   left: 100,
      //   //   right: 8,
      //   //   bottom: 30,
      //   //   zoomLock: true,
      //   //   // containLabel: true
      //   // },
      //   name: '（万元）', //单位
      //   xAxis: {
      //     type: 'category',
      //     nameLocation: 'start',
      //     data: [],
      //     axisLabel: {
      //       show: true,
      //       interval: 0,
      //       margin: 6
      //       // textStyle: {
      //       //   color: function (value) {
      //       //     if (value === '广东事业部') {
      //       //       return '#f4ea2a';
      //       //     } else if (value === '基础分公司') {
      //       //       return '#de5956';
      //       //     } else if (value === '水利水电分公司') {
      //       //       return '#de5956';
      //       //     } else {
      //       //       return '#666666'
      //       //     }
      //       //   },
      //       // },
      //     }
      //   },
      //   // nameList:
      //   data: [
      //     {
      //       name: '标准成本',
      //       data: [],
      //       type: 'bar',
      //       barWidth: '20',
      //       barGap: '5%',
      //       barCategoryGap: '20%',
      //       label: {
      //         show: true
      //       }
      //     },
      //     {
      //       name: '当前累计目标成本',
      //       data: [],
      //       type: 'bar',
      //       barWidth: 20,
      //       // barWidth: '10%',
      //       barGap: '5%',
      //       barCategoryGap: '20%',
      //       label: {
      //         show: true
      //       }
      //     },
      //     {
      //       name: '当前累计实际成本',
      //       data: [],
      //       type: 'bar',
      //       barWidth: 20,
      //       // barWidth: '10%',
      //       barGap: '5%',
      //       barCategoryGap: '20%',
      //       label: {
      //         show: true
      //       }
      //     }
      //   ]
      // },
      accomplishRatioOption: {
        // title: '实木比',
        legend: {
          // left: '15%',
          // top:'2%',
          data: ['实目比']
        },
        color: ['#4874cb'],
        // y轴滚动条配置
        // dataZoom:{
        //   show:true,
        //   realtime:true,
        //   type:'slider',
        //   // y:70,
        //   width:"80%",
        //   height:10,
        //   start:0,
        //   end:80,
        //   left: 100,
        //   right: 8,
        //   bottom: 30,
        //   zoomLock: true,
        //   // containLabel: true
        // },
        name: '（万元）', //单位
        xAxis: {
          type: 'category',
          nameLocation: 'start',
          triggerEvent: true,
          data: [],
          axisLabel: {
            show: true,
            interval: 0,
            margin: 6
            // textStyle: {
            //   color: function (value) {
            //     if (value === '广东事业部') {
            //       return '#f4ea2a';
            //     } else if (value === '基础分公司') {
            //       return '#de5956';
            //     } else if (value === '水利水电分公司') {
            //       return '#de5956';
            //     } else {
            //       return '#666666'
            //     }
            //   },
            // },
          }
        },
        // nameList:
        data: [
          {
            name: '实目比',
            data: [],
            type: 'bar',
            barWidth: '20',
            barGap: '5%',
            barCategoryGap: '20%',
            label: {
              show: true
            }
          }
        ]
      },
      accomplishRatioOption1: {
        legend: {
          // left: '10%',
          // top:'2%',
          data: ['标准成本', '当前累计目标成本', '当前累计实际成本']
        },
        color: ['#4874cb', '#ee823a', '#f2bb43'],
        // y轴滚动条配置
        // dataZoom:{
        //   show:true,
        //   realtime:true,
        //   type:'slider',
        //   // y:70,
        //   width:"80%",
        //   height:10,
        //   start:0,
        //   end:80,
        //   left: 100,
        //   right: 8,
        //   bottom: 30,
        //   zoomLock: true,
        //   // containLabel: true
        // },
        name: '（万元）', //单位
        xAxis: {
          type: 'category',
          nameLocation: 'start',
          data: [],
          axisLabel: {
            show: false,  //x轴名称显影
            interval: 0,
            margin: 6
            // textStyle: {
            //   color: function (value) {
            //     if (value === '广东事业部') {
            //       return '#f4ea2a';
            //     } else if (value === '基础分公司') {
            //       return '#de5956';
            //     } else if (value === '水利水电分公司') {
            //       return '#de5956';
            //     } else {
            //       return '#666666'
            //     }
            //   },
            // },
          }
        },
        // nameList:
        data: [
          {
            name: '标准成本',
            data: [],
            type: 'bar',
            barWidth: '20',
            barGap: '5%',
            barCategoryGap: '20%',
            label: {
              show: true,
              position: 'top', // 在上方显示
              distance: 10, 
            }
          },
          {
            name: '当前累计目标成本',
            data: [],
            type: 'bar',
            barWidth: 20,
            // barWidth: '10%',
            barGap: '5%',
            barCategoryGap: '20%',
            label: {
              show: true,
              position: 'top', // 在上方显示
              distance: 20, 
            }
          },
          {
            name: '当前累计实际成本',
            data: [],
            type: 'bar',
            barWidth: 20,
            // barWidth: '10%',
            barGap: '5%',
            barCategoryGap: '20%',
            label: {
              show: true,
              position: 'top', // 在上方显示
              distance: 30, 
            }
          }
        ]
      },
      ready: false,
      ready1: false,
      // 当期数据统计表 - 差值
      differenceValueData: [],
      solidEyeRatio: [],
      differenceValueData1: [],
      solidEyeRatio1: [],
      // 总成本折现对比图 - 表头
      columns1: [
        {
          title: '成本名称',
          dataIndex: 'name',
          width: 180
        }
      ],
      // 总成本折现对比图 - 表数据
      dataSource: [],

      // 总成本折现对比图 - 折线图数据
      ELineData: {
        name: '（万元）',
        color: ['#4874cb', '#ee823a', '#f2bb43'],
        xAxis: {
          data: []
        },
        legend: {
          left: '8%',
          top: '6%',
          data: ['标准成本', '当期累计目标成本', '当期累计实际成本']
        },
        series: [
          {
            name: '标准成本',
            type: 'line',
            smooth: true,
            // stack: 'x',  //堆积折线图
            label: {
              show: true,
              position: 'left',
              color: '#4874cb'
            },
            smartLabel: {
              enable: true
              // 可选配置项
            },
            data: []
          },
          {
            name: '当期累计目标成本',
            type: 'line',
            // stack: 'x',
            smooth: true,
            label: {
              show: true,
              position: 'top',
              color: '#ee823a'
            },
            smartLabel: {
              enable: true
              // 可选配置项
            },
            data: []
          },
          {
            name: '当期累计实际成本',
            type: 'line',
            // stack: 'x',
            smooth: true,
            label: {
              show: true,
              position: 'right'
            },
            smartLabel: {
              enable: true
              // 可选配置项
            },
            data: []
          }
        ]
      },
      lineShow: false,
      timer1: null,
      timer2: null,
      timer3: null
    }
  },
  beforeCreate() {},
  watch: {
    //监听路由变更
    $route(newVal) {
      //   console.log(newVal,'newVal');
      if (newVal.path == '/businessAffairs/businessCostPlanManagement/headquartersDashboard/spectaculars') {
        this.spinning = true
        this.isBackColor= true
        this.getData()
        this.getProject()
        this.getCostContrastList(this.isBackColor?2:1)
      }
    }
  },
  created() {},
  mounted() {
    // this.$refs.accomplishRatio.resize()
    this.spinning = true
    this.getData()
    this.getProject()
    this.getCostContrastList(this.isBackColor?2:1)
  },
  methods: {
    //表格点击下钻
    cellEdit(value) {
      let that = this
      return {
        on: {
          click: () => {
            that.$router.push({
              path: '/businessAffairs/businessCostPlanManagement/branchDashboard/spectaculars',
              query: {
                id: value.id
              }
            })
          }
        }
      }
    },
    //图表点击下钻
    lineClick(params){
      this.$router.push({
        path: '/businessAffairs/businessCostPlanManagement/branchDashboard/spectaculars',
        query:{
          id:params?.data?.id || params.id
        }
      })
    },
    // 成本计划看板-当期节点数据统计表
    async getData() {
      this.ready = false
      this.tableData = []
      this.accomplishRatioOption.data[0].data = []
      // this.accomplishRatioOption.data[1].data = []
      // this.accomplishRatioOption.data[2].data = []
      clearTimeout(this.timer1)
      this.timer1 = setTimeout(() => {
        getCompleteNodeStatistics().then((res) => {
          if (res.code == 0) {
            let { data } = res
            // 头部数据
            this.totalArr =placeholder( this.totalArr.map((item, index) => {
              if (item.name && item.name === '目标成本合计') {
                item.money = data.targetCostTotal
              } else if (item.name && item.name === '实际成本合计') {
                item.money = data.realityCostTotal
              } else if (item.name && item.name === '实目比') {
                item.money = data.solidEyeRatio
              } else if (item.name && item.name === '目标与实际成本差值') {
                item.money = data.difference
              }
              return item
            }))
            // 表格数据
            this.tableData = placeholder(data.list)
            let nameArr = [] // 柱状图名称
            let standardCostArr = [] //总标准成本集合
            let targetCostArr = [] //当期累计目标成本集合
            let realityCostArr = [] // 当期累计实际成本集合
            let differenceArr = []
            let solidEyeRatioArr = []
            data.list.forEach((item, index) => {
              item.name !== '合计' && nameArr.push(item.name)
              // item.name !== '合计' && standardCostArr.push(item.standardCost)
              item.name !== '合计' && standardCostArr.push({
                name: item.name,
                standardCost: item.standardCost
              })
              // item.name !== '合计' && targetCostArr.push(item.currentTargetCost)
              item.name !== '合计' && targetCostArr.push({
                name:item.name,
                currentTargetCost:item.currentTargetCost
              })
              // item.name !== '合计' && realityCostArr.push(item.realityCost)
              item.name !== '合计' && realityCostArr.push({
                name:item.name,
                realityCost:item.realityCost
              })
              item.name !== '合计' && this.differenceValueData.push(item.difference)
              item.name !== '合计' && this.solidEyeRatio.push({value:item.solidEyeRatio,id:item.id})
              item.name !== '合计' &&
                differenceArr.push({
                  name: item.name,
                  difference: item.difference
                })
              item.name !== '合计' &&
                solidEyeRatioArr.push({
                  name: item.name,
                  solidEyeRatio: item.solidEyeRatio
                })
            })
            this.accomplishRatioOption.xAxis.data = nameArr
            this.accomplishRatioOption.xAxis.axisLabel.formatter = function (params, index) {
              let findDifferenceObj = differenceArr.find((item) => item.name == params)
              let findSolidEyeRatioObj = solidEyeRatioArr.find((item) => item.name == params)
              return params
              // return params + '\n' + findDifferenceObj?.difference + '\n' + findSolidEyeRatioObj?.solidEyeRatio
            }
            const { name } = this.accomplishRatioOption
            this.accomplishRatioOption.tooltip  = {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              },
              formatter: function(params) {
                
                let standardCost = standardCostArr.find((item) => item.name == params[0].name)
                let targetCost = targetCostArr.find((item) => item.name == params[0].name)
                let realityCost = realityCostArr.find((item) => item.name == params[0].name)
                let title = ''
                title += '标准成本' + ':    ' + standardCost.standardCost+ name +  '<br/>' +
                  '当期累计目标成本' + ':    ' + targetCost.currentTargetCost + name + '<br/>' +
                  '当期累计实际成本' + ':    ' + realityCost.realityCost + name + '<br/>' 
                return params[0].name + '<br/>' + title
              }
            }
            if (standardCostArr.length == 0 && targetCostArr.length == 0 && realityCostArr.length == 0) {
              this.accomplishRatioOption.isBar = 1
            } else {
              this.accomplishRatioOption.isBar = 2
            }
            // this.accomplishRatioOption.data[0].data = standardCostArr
            // this.accomplishRatioOption.data[1].data = targetCostArr
            // this.accomplishRatioOption.data[2].data = realityCostArr
            this.accomplishRatioOption.data[0].data = this.solidEyeRatio //柱状图只展示实目比
            this.accomplishRatioOption.onClick = (param)=>{
              let findObj = this.tableData.find((item)=>item.name===param.value) || {},
              newParam = {}
              //点击x轴
              if(param.componentType == 'xAxis'){
                newParam = findObj || {};
              }else{
                newParam = param
              }
                this.lineClick(newParam)
              }
                    
            this.ready = true
            this.spinning = false
          } else {
            this.spinning = false
          }
        })
      }, 1000)
    },

    async getProject() {
      this.ready1 = false
      this.accomplishRatioOption1.data[0].data = []
      this.accomplishRatioOption1.data[1].data = []
      this.accomplishRatioOption1.data[2].data = []
      this.projectData = []
      clearTimeout(this.timer2)
      this.timer2 = setTimeout(() => {
        getCurrentPeriodStatistics().then((res) => {
          if (res.code == 0) {
            let { data } = res
            // 头部数据
            this.project = placeholder(this.project.map((item, index) => {
              if (item.name && item.name === '目标成本合计') {
                item.money = data.targetCostTotal
              } else if (item.name && item.name === '实际成本合计') {
                item.money = data.realityCostTotal
              } else if (item.name && item.name === '实目比') {
                item.money = data.solidEyeRatio
              } else if (item.name && item.name === '目标与实际成本差值') {
                item.money = data.difference
              }
              return item
            }))
            // 表格数据
            this.projectData = placeholder(data.list)
            let nameArr = [] // 柱状图名称
            let standardCostArr = [] //总标准成本集合
            let targetCostArr = [] //当期累计目标成本集合
            let realityCostArr = [] // 当期累计实际成本集合
            let differenceArr = []
            let solidEyeRatioArr = []
            data.list.forEach((item, index) => {
              item.name !== '合计' && nameArr.push(item.name)
              item.name !== '合计' && standardCostArr.push(item.standardCost)
              item.name !== '合计' && targetCostArr.push(item.currentTargetCost)
              item.name !== '合计' && realityCostArr.push(item.realityCost)
              item.name !== '合计' && this.differenceValueData1.push(item.difference)
              item.name !== '合计' && this.solidEyeRatio1.push(item.solidEyeRatio)
              item.name !== '合计' &&
                differenceArr.push({
                  name: item.name,
                  difference: item.difference
                })
              item.name !== '合计' &&
                solidEyeRatioArr.push({
                  name: item.name,
                  solidEyeRatio: item.solidEyeRatio
                })
            })
            this.accomplishRatioOption1.xAxis.data = nameArr
            this.accomplishRatioOption1.xAxis.axisLabel.formatter = function (params, index) {
              let findDifferenceObj = differenceArr.find((item) => item.name == params)
              let findSolidEyeRatioObj = solidEyeRatioArr.find((item) => item.name == params)
              return params + '\n' + findDifferenceObj?.difference + '\n' + findSolidEyeRatioObj?.solidEyeRatio
            }
            if (standardCostArr.length == 0 && targetCostArr.length == 0 && realityCostArr.length == 0) {
              this.accomplishRatioOption1.isBar = 1
            } else {
              this.accomplishRatioOption1.isBar = 2
            }
            this.accomplishRatioOption1.data[0].data = standardCostArr
            this.accomplishRatioOption1.data[1].data = targetCostArr
            this.accomplishRatioOption1.data[2].data = realityCostArr
            this.ready1 = true
          }
        })
      }, 100)
    },

    async getCostContrastList(type = 2) {
      this.isBackColor = type == 1 ? false : true 
      this.lineShow = false
      this.ELineData.series[0].data = []
      this.ELineData.series[1].data = []
      this.ELineData.series[2].data = []
      this.columns1 = [
        {
          title: '成本名称',
          dataIndex: 'name',
          width: 180
        }
      ]
      this.dataSource = []
      clearTimeout(this.timer3)
      this.timer3 = setTimeout(() => {
        getCostContrast({type}).then((res) => {
          if (res.code === '0') {
            let  data  = res.data
            data.costNameList.forEach((item, index) => {
              this.columns1.push({
                title: item.slice(0, 4) + '年' + item.slice(4, 6) + '月',
                dataIndex: item
              })
            })
            this.ELineData.xAxis.data = data.costNameList.map((item, index) => {
              return item.slice(0, 4) + '年' + item.slice(4, 6) + '月'
            })
            data.list.forEach((item) => {
              if (item.name != '实目比') {
                this.dataSource.push(placeholder(item))
              }
            })
            this.ELineData.series[0].data = data.standardCostList
            this.ELineData.series[1].data = data.targetCostList
            this.ELineData.series[2].data = data.realityCostList
            this.ELineData.series[2].label = {
              show: true,
              position: 'bottom',
              color: '#f2bb43',
              formatter: function (params) {
                return params.value + '(' + data.solidEyeRatioList[params.dataIndex] + '%)'
              }
            }
          }

          this.lineShow = true
        })
      }, 1000)

      // a1 = Object.values(data.list[0])
      // a2 = Object.values(data.list[1])
      // a3 = Object.values(data.list[2])
      // data.list.forEach((item, index) => {
      //   if(item.name === '当期累计实际成本'){

      //   }
      // })
    }
  }
}
</script>
<style lang="less" scoped>

@deep: ~'>>>';
.leftTitle {
  flex: 1;
}

.difference {
  flex: 7;
  display: flex;
  justify-content: space-between;
}

.add {
  margin-top: -80px;
  font-size: 12px;
}

.smb {
  margin-top: -4px;
  font-size: 16px;
  margin-bottom: 20px;
}

.totalBox {
  padding: 0 20px;
  margin-top: 10px;
  margin-bottom:40px;
  @{deep} .ant-table {
    td {
      height: 35px !important;
    }
    .ant-table-body {
      max-height: 385px;
      overflow-y: auto;
      margin:0  !important;
    }
  }
}
.totalBox1{
  @{deep} .ant-table {
    .ant-table-body {
      overflow-x: hidden !important;
    }
  }
}
.unit {
  text-align: right;
  margin-top: -10px;
}
.project1{
  position: absolute;
    top: 10px;
    right: 1%;
    display: flex;
    justify-content: space-evenly;
    width: 140px;
    height: 28px;
    line-height: 28px;
    border: 1px solid #02a7f0;
    border-radius: 8px;
    .allProject{
      cursor: pointer;
      flex: 1;
      text-align: center;
    }
    .projectColor{
      background-color: #02a7f0;
      color: #fff;
    }
}
</style>
